<template>
	<jk-dialog
		v-model="showDialog"
		title="推送配置-详情"
		width="800px"
		:show-content-loading="showLoading"
		append-to-body
		:show-cancel-btn="false"
		:show-confirm-btn="false"
		:show-close-btn="true"
		@on-close="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
	>
		<el-form ref="ruleForm" label-width="110px">
			<el-form ref="ruleForm" :model="ruleForm" label-width="110px" :show-message="false">
				<el-row ref="box1">
					<el-col :span="12">
						<el-form-item class="margin-bottom-10" label="推送类型">
							<span class="read-only-2">{{ ruleForm.messageTypeName }}</span>
						</el-form-item>
					</el-col>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="备注">
							<span class="read-only-2">{{ ruleForm.remark }}</span>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="22">
						<el-form-item class="margin-bottom-10" label="通知人员">
							<div ref="box2" class="flex-end-center">
								<div class="flex-end-center">
									<div class="flex-start-center margin-right-10">
										<div class="legend-icon legend-icon-primary"></div>
										<span class="legend-icon-label">已绑定</span>
									</div>
									<div class="flex-start-center">
										<div class="legend-icon legend-icon-info"></div>
										<span class="legend-icon-label">未绑定</span>
									</div>
								</div>
							</div>
							<div class="wx-notice-emp-box" :style="{height: `${dialogTableHeight - 30}px`}">
								<div
									v-for="(item, index) in ruleForm.empList"
									:key="index"
									class="wx-notice-emp-item"
								>
									<el-tag effect="plain" :type="item.openId ? 'primary' : 'info'" class="width-100-percent flex-between-center">
										<div class="flex-start-center">
											<div
												:class="[
													'legend-icon',
													item.openId ? 'legend-icon-primary' : 'legend-icon-info'
												]"
											></div>
											<span>{{ item.empName }}</span>
										</div>
									</el-tag>
								</div>
								<div v-if="!ruleForm.empList.length" class="flex-center width-100-percent">
									<span>暂无</span>
								</div>
							</div>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { spinNotificationMessageConfigGet } from '../../../api/production/wxPushConfig';

    export default {
        props: {
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        mixins: [calHeight],
        data() {
            return {
                showDialog: false,
                showLoading: true,
                ruleForm: {
                    empList: []
                }
            };
        },
        methods: {
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                }
            },
            getDetailRequest() {
                this.showLoading = true;
                return spinNotificationMessageConfigGet({ id: this.dataId }).then(res => {
                    this.showLoading = false;
                    if (res.data.status === 200) {
                        this.ruleForm = res.data.res;
                    }
                });
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal && this.dataId) {
                    this.getDetailRequest();
                }
            }
        }
    };
</script>
<style scoped lang="scss">
.wx-notice-emp-box {
    border: solid 1px #dcdee2;
    border-radius: 4px;
    overflow: auto;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .wx-notice-emp-item {
        width: calc(100% / 5);
        padding: 2px;
        box-sizing: border-box;
    }
}
.legend-icon-label {
    font-size: 12px;
}
.legend-icon {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}
.legend-icon-primary {
    background: #2d8cf0;
}
.legend-icon-info {
    background: #c5c8ce;
}
</style>
